<template>
  <div id="building" />
</template>

<script setup>
import { onMounted, onBeforeUnmount, onUnmounted } from 'vue'
import init, {
  onResize,
  onMousedown,
  onMousemove,
  onKeydown,
  onKeyup,
  destroyContext
} from './building';

onMounted(() => {
  let container = document.getElementById('building');
  window.addEventListener("resize", onResize)
  init(container)
  document.addEventListener('mousedown', onMousedown)
  document.addEventListener('mousemove', onMousemove)
  document.addEventListener('keydown', onKeydown)
  document.addEventListener('keyup', onKeyup)
})

onBeforeUnmount(() => {
  destroyContext()
})

onUnmounted(() => {
  console.log('Building组件卸载了')
  window.removeEventListener('resize', onResize)
  document.removeEventListener('mousedown', onMousedown)
  document.removeEventListener('mousemove', onMousemove)
  document.removeEventListener('keydown', onKeydown)
  document.removeEventListener('keyup', onKeyup)
})

</script>

<style scoped>
#building {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0
}
</style>